import React, { useEffect, useRef } from 'react'
import * as echarts from "echarts"
import axios from "axios"
import myImg from "../../../assets/images/71693535066_.pic.jpg"
import myImg2 from "../../../assets/images/81693535067_.pic.jpg"

export default function Sale() {
  const mapRef = useRef()
  useEffect(() => {
    fetchData()
  }, [])

  const fetchData = async () => {
    const res = await axios.get("https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=510000_full")
    initMap(res.data)
  }
  const initMap = (data) => {
    const mychart = echarts.init(mapRef.current)
    const option = getOption()
    //mychart注册地图
    echarts.registerMap("map", data, {})
    mychart.setOption(option)
  }
  
  const getOption = () => {
    //new Image创建图片原生节点
    const image = new Image();
    image.src = myImg;
    const image2 = new Image();
    image2.src = myImg2;

    return {
      backgroundColor: "#99d7f5",
      tooltip: {
        backgroundColor: "#062444",
        borderColor: "#ff2b73",
        triggerOn: 'mousemove', //click
        enterable: true,
        formatter: function (params) { //用于显示多个数据
          var tipHtml = `
            <div style="background-color:#062444;color:#fff;display:flex;align-items:center;font-size:14px;">
            <img src=""/>
            <div style="margin-left:10px;">
            <div style="color:#ff2b73;font-weight:600;">地区人口数量：${10}w</div>
            <div style="font-weight:600;">地区名字：${params.name}</div>
            </div>
            </div>
          `
          return tipHtml;
        }
      },
      geo: {
        show: true,
        aspectScale: 0.95, //地图长度比
        zoom: 1.1,
        map: 'map',
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false,
          }
        },
        roam: false, //地图设置不可拖拽，固定的
        itemStyle: {
          // normal: {
          // 	areaColor: '#00406b',
          // 	borderWidth: 1,
          // 	shadowColor: '#00406b',
          // 	shadowBlur: 100,
          // }
          normal: {
            areaColor: '#7ef2ff',
            shadowColor: '#fff',
            shadowOffsetX: -6,
            shadowOffsetY: 6,
            shadowBlur: 12,
          },
          emphasis: {
            show: false,
            areaColor: '#00684d',
            borderWidth: 0,
            color: '',
            label: {
              show: false
            }
          }
        }
      },
      series: [{
        select: {
          label: {
            color: '#fff'
          },
          itemStyle: { //选择后的样式
            borderColor: '#a5f2fc',
            borderWidth: 1,
            color: '#267df2', //设置地图点击后的颜色
            shadowColor: "#00684d", //阴影颜色
            shadowBlur: 10, //阴影浓度
          }
        },
        name: '',
        itemStyle: {
          normal: { //未选中状态
            borderWidth: 1, //边框大小
            borderColor: '#a5f2fc',
            // areaColor: '#267df2', //背景颜色
            areaColor: {
              image: image, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
              repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
            },
            label: {
              show: true, //显示名称
              formatter: function (params) {
                return params.name
              }
            },
            // shadowColor: `#00406b`,
            // shadowOffsetX: -20,
            // shadowOffsetY: 10,
            // shadowBlur: 20
          },
          emphasis: { // 移动样式
            borderWidth: 1,
            borderColor: '#a5f2fc',
            shadowColor: "rgba(0,0,0,.6)", //阴影颜色
            shadowBlur: 10, //阴影浓度
            // areaColor: '#267df2',
            areaColor: {
              image: image2, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
              repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
            },
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          }
        },
        type: 'map',
        mapType: 'map',
        aspectScale: 0.95, //地图长度比
        zoom: 1.1,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#000',
              fontSize: 12,
              fontWeight: 'bold'
            }
          },
          emphasis: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        // data: dataArr
      }]
    }
  }
  return (
    <div ref={mapRef} style={{ width: "800px", height: "600px" }}>Sale</div>
  )
}
